<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" label="序号" width="60">
            <template #default="scope">
                <span>{{ scope.$index + 1 + (currentPage - 1) * pageSize }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="100">
            <template #default="scope">
                <el-image style="width: 100px;" preview-teleported :src="scope.row.img1" :preview-src-list="[
                    scope.row.img1,
                    scope.row.img2,
                    scope.row.img3,
                    scope.row.img4,
                ]" fit="cover" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="proname" width="120">
        </el-table-column>
        <el-table-column align="center" label="品牌" prop="brand" width="80"></el-table-column>
        <el-table-column align="center" :filters="filters" :filter-method="filterHandler" label="分类" prop="category"
            width="80"></el-table-column>
        <el-table-column align="center" sortable label="原价" prop="originprice" width="80"></el-table-column>
        <el-table-column align="center" sortable label="折扣" prop="discount" width="50"></el-table-column>
        <el-table-column align="center" sortable label="销量" prop="sales" width="100"></el-table-column>
        <el-table-column align="center" label="是否售卖" prop="issale" width="180">
            <template #default="scope">
                <el-switch v-model="scope.row.issale" :active-value="1" :inactive-value="0" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y"
                    inactive-text="N" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="是否推荐" prop="isrecommend" width="180">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y" inactive-text="N"
                    @change="updateProFn(scope.row.proid, 'isrecommend', scope.row.isrecommend)" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="是否秒杀" prop="isseckill" width="180">
            <template #default="scope">
                <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y" inactive-text="N"
                    @change="updateProFn(scope.row.proid, 'isseckill', scope.row.isseckill)" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<script setup lang='ts'>
// 导入权限页面判断
import { nopermission } from '@/utils/nopermission';
nopermission();

// 导入接口
import { getProListApi } from '@/api/pro';
import { onMounted, ref } from 'vue';
onMounted(() => {
    // 初始化获取产品列表
    getprolist()
})
// 当前对象数据类型
interface ItemType {
    banners: string[],
    brand: string,
    category: string,
    discount: number,
    img1: string,
    img2: string,
    img3: string,
    img4: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
// 当前页数
const currentPage = ref<number>(1);
// 每页条数
const pageSize = ref<number>(10);
// 产品列表数据
const tableData = ref<Array<ItemType>>([]);
// 数据总条数
const total = ref<number>(0)
const getprolist = () => {
    getProListApi({
        count: currentPage.value,
        limitNum: pageSize.value
    }).then((res: any) => {
        console.log('res', res);
        tableData.value = res.data
        total.value = res.total
    })
}


// 删除事件
const handleDelete = (index: number, row: ItemType) => {
    console.log(index, row)
}

// 分页切换每页条数
const handleSizeChange = (val: number) => {
    pageSize.value = val
    // 重新请求数据
    getprolist()
}

// 分页切换当前页
const handleCurrentChange = (val: number) => {
    //console.log('当前页', val);
    currentPage.value = val;
    // 重新请求数据
    getprolist()
}

// 分类筛选
import type { TableColumnCtx, TableInstance } from 'element-plus';
import { computed } from 'vue';
import { uniqWith, isEqual } from 'lodash'
// const filters = [
//     { text: 'Home', value: 'Home' },
//     { text: 'Office', value: 'Office' },
// ]
const filters = computed(() => {
    const newArr = tableData.value.map((item: ItemType) => {
        return {
            text: item.category,
            value: item.category
        }
    })
    return uniqWith(newArr, isEqual)
})
const filterHandler = (
    value: string,
    row: any,
    column: TableColumnCtx<ItemType>
) => {
    const property = column['property']
    return row[property] === value
}

// 更新是否售卖,是否推荐, 是否秒杀状态
import { updateProApi } from '@/api/pro';
import { ElMessage } from 'element-plus'
const updateProFn = (proid: string, type: string, flag: boolean) => {
    console.log(proid, type, flag);
    updateProApi({
        proid,
        type,
        flag
    }).then((res: any) => {
        ElMessage({
            message: res.message,
            type: res.code == 200 ? 'success' : 'error',
            duration: 1000
        });
        if (res.code == 200) {
            // 重新请求产品列表数据
            getprolist()
        }
    })
}


</script>
<style scoped lang="scss">
/* 设置溢出省略 */
::v-deep .el-table_1_column_3>div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.el-pagination {
    margin-top: 20px;
}
</style>
